<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1, maximum-scale=1">
    <script type="text/javascript" src="../tooljs/jquery.js"></script>
    <script type="text/javascript" src="../js/headModule.js"></script>
    <script type="text/javascript" src="../js/bottomModule.js"></script>
    <title>分类页</title>
</head>
<style>
    .checkedClassifyItem a{
        background-color: #f6f6f6;
    }
    .classifyItem{
        background-color: white;
    }
    .classifyContext{
        background-color: #f6f6f6;
        width:550px;
        height: 1100px;
        float: left;
    }
    div[name='hotClassifyPhotoItem']{
        float: left;
        margin-top: 30px;
    }
    div[name='hotClassifyPhotoItem'] span{
        font-size:24px;
        color:#333333;
        display: table;
        margin-left: 70px;
        margin-top: 10px;
    }
    div[name='hotClassify']{
        margin-top: 20px;
    }
    div[name='hotClassify'] span:first-child{
        margin-left: 20px;
    }
    div[name='photo'] img{
        margin-top:20px;
        margin-left: 20px;
    }
    .checkedClassifyItem{
        list-style-type:none;
        background: #f6f6f6;
        font-size: 28px;
        color: #f34B91;
        height: 100px;
        text-align:center;
        line-height: 100px;
    }
    .classifyItem{
        list-style-type:none;
        font-size:28px;
        color: #333333;
        height: 100px;
        text-align: center;
        line-height: 100px;
    }
</style>
<body style="width: 750px">
<div name="classifyPage">
    <div name="headModule">
    </div>
    <div name="middleModule" style="height: 1100px;width: 750px">
        <div class="classifyPannel" style="width:28%;display:inline">
           <nav name='classifyItems' style="width: 200px;height: 1100px;float: left">
                <li class="checkedClassifyItem">
                    <a >
                        推荐分类
                    </a>
                </li>
                <li class="classifyItem">
                    <a >
                        大牌文胸
                    </a>
                </li>
                <li class="classifyItem">
                    <a >
                        睡衣睡裤
                    </a>
                </li>
           </nav>
        </div>
        <div class="classifyContext" style="display: inline">
            <div id="classifyBody">
                <div name="photo">
                    <img src="../images/1.jpg" height="220px" width="512px">
                </div>
                <div name="hotClassify">
                    <span style="font-size:28px;color:#333333">热门分类</span>
                    <div name="hotClassifyPhoto">
                        <div name="hotClassifyPhotoItem">
                            <img src="../images/timg_140X140.jpg" style="margin-left: 30px">
                            <span>内衣</span>
                        </div>
                        <div name="hotClassifyPhotoItem">
                            <img src="../images/timg_140X140.jpg" style="margin-left: 36px">
                            <span>内衣</span>
                        </div>
                        <div name="hotClassifyPhotoItem">
                            <img src="../images/timg_140X140.jpg" style="margin-left: 36px">
                            <span>内衣</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div name="bottomModule">
    </div>
</div>
<script type="text/javascript">
    var headmodule = headmodal("商品分类","../images/icons/nav_menu@2x.png","../images/icons/nav_news@2x.png","navIcon","chatIcon");
    $('div[name="headModule"]').append(headmodule);
    var bottommodule = bottomModal("../images/icons/tab_home@2x.png","../images/icons/tab_classify_select@2x.png","../images/icons/tab_publish@2x.png","../images/icons/tab_information@2x.png","../images/icons/tab_my@2x.png")
    $('div[name="bottomModule"]').append(bottommodule);

    $('li').bind('click',function(){
        $('li').each(function () {
            var _this=this;
            var a = _this.getAttribute("class");
            if(a=="checkedClassifyItem"){
                _this.setAttribute("class","classifyItem");
            }
        })
        this.setAttribute("class","checkedClassifyItem");
    })

    $('img[name="img1"]').click(function () {
        window.location.href="../homepage.html";
    })
    $('img[name="img4"]').click(function () {
        window.location.href="informationCenterPage.html";
    })
    $('img[name="img5"]').click(function () {
        window.location.href="personalCenterPage.html";
    })
</script>
</body>
</html>